import React, { useState } from 'react'
import './App.css'
import SessionCard from './components/SessionCard'
import HistorySection from './components/HistorySection'

function App() {
  const [searchKeyword, setSearchKeyword] = useState('')

  // 进行中的会话
  const inProgressSessions = [
    {
      id: 1,
      status: 'in-progress',
      tags: ['天美', '王者荣耀'],
      title: 'NGR流失访谈',
      subtitle: 'Product',
      creator: ['A', 'B'],
      creatorCount: 2,
      collaborator: ['C', 'D'],
      collaboratorCount: 2,
      startTime: '2024-10-11 18:00:00',
      endTime: '2024-10-11 19:00:00',
      location: '端手游体验室(深圳-D1-0445)',
      actionButton: '进入直播'
    }
  ]

  // 暂停中的会话
  const pausedSessions = [
    {
      id: 2,
      status: 'paused',
      tags: ['天美', '王者荣耀'],
      title: 'NGR流失访谈',
      subtitle: 'Day5 AM',
      creator: ['A', 'B'],
      creatorCount: 2,
      collaborator: ['C', 'D'],
      collaboratorCount: 2,
      startTime: '2024-10-11 18:00:00',
      endTime: '2024-10-11 19:00:00',
      location: '端手游体验室(深圳-D1-0445)',
      actionButton: '继续直播'
    }
  ]

  // 未开始的会话
  const notStartedSessions = [
    {
      id: 3,
      status: 'not-started',
      tags: ['天美', '王者荣耀'],
      title: 'NGR流失访谈',
      subtitle: 'Day5 AM',
      creator: ['A', 'B'],
      creatorCount: 2,
      collaborator: ['C', 'D'],
      collaboratorCount: 2,
      startTime: '2024-10-11 18:00:00',
      endTime: '2024-10-11 19:00:00',
      location: '端手游体验室(深圳-D1-0445)',
      actionButton: '开始直播'
    }
  ]

  // 历史数据
  const historyData = [
    {
      id: 1,
      tags: ['天美', '王者荣耀'],
      creator: ['A', 'B'],
      creatorCount: 2,
      collaborator: ['C', 'D'],
      collaboratorCount: 2,
      dateRange: '2024-08-19 to 2024-08-17',
      location: '端手游体验室(深圳-D1-0445)',
      expanded: true,
      records: [
        {
          id: 1,
          title: 'NGR流失访谈NGR流...',
          time: '2024-08-19 15:30 - 2024-08-19 19:30',
          location: '端手游体验室(深圳-D1-0445)',
          host: 'luceyyang(杨琪丹)',
          hasMore: true
        },
        {
          id: 2,
          title: 'NGR流失访谈(4)',
          time: '2024-08-19 15:30 - 2024-08-19 19:30',
          location: '端手游体验室(深圳-D1-0445)',
          host: 'luceyyang(杨琪丹)',
          hasMore: true
        },
        {
          id: 3,
          title: 'test',
          time: '2024-08-19 15:30 - 2024-08-19 19:30',
          location: '端手游体验室(深圳-D1-0445)',
          host: 'luceyyang(杨琪丹)',
          hasDelete: true
        }
      ]
    },
    {
      id: 2,
      tags: ['天美', '王者荣耀'],
      creator: ['A', 'B'],
      creatorCount: 2,
      collaborator: ['C', 'D'],
      collaboratorCount: 2,
      dateRange: '2024-08-19 to 2024-08-17',
      location: '端手游体验室(深圳-D1-0445)',
      expanded: false,
      records: []
    }
  ]

  return (
    <div className="app">
      <div className="container">
        {/* Header */}
        <header className="header">
          <h1 className="title">我的座谈会(999)</h1>
          <div className="search-box">
            <svg className="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.9-2.9" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <input
              type="text"
              placeholder="请输入关键词"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              className="search-input"
            />
          </div>
        </header>

        {/* Content Sections */}
        <main className="content">
          {/* 进行中 */}
          <section className="section">
            <h2 className="section-title">进行中</h2>
            <div className="session-list">
              {inProgressSessions.map(session => (
                <SessionCard key={session.id} session={session} />
              ))}
            </div>
          </section>

          {/* 暂停中 */}
          <section className="section">
            <h2 className="section-title">暂停中</h2>
            <div className="session-list">
              {pausedSessions.map(session => (
                <SessionCard key={session.id} session={session} />
              ))}
            </div>
          </section>

          {/* 未开始 */}
          <section className="section">
            <h2 className="section-title">未开始</h2>
            <div className="session-list">
              {notStartedSessions.map(session => (
                <SessionCard key={session.id} session={session} />
              ))}
            </div>
          </section>

          {/* 历史数据 */}
          <HistorySection data={historyData} />
        </main>
      </div>
    </div>
  )
}

export default App

